<template>
  <xui-center-popup ref="popupRef" closeable>
    <view class="vip-qrcode" v-if="info">
      <view class="title">会员码</view>
      <image class="code1" :src="joinBase64Img(info.qrCode)" />
      <image class="code2" :src="joinBase64Img(info.barCode)" />
      <view class="number">{{ info.code }}</view>
    </view>
  </xui-center-popup>
</template>

<script>
import { ref } from 'vue'
import { getVipQrcode } from '@/api/user'
import { joinBase64Img } from '@/utils/img'

export default {
  name: 'VipQrcode',
  setup () {
    const popupRef = ref()
    const open = async () => {
      await getInfo()
      popupRef.value.open()
    }
    const close = () => popupRef.value.close()

    const info = ref()
    const getInfo = async () => {
      const res = await getVipQrcode()
      info.value = res
    }

    return {
      joinBase64Img,
      popupRef,
      open,
      close,
      info
    }
  }
}
</script>

<style lang="scss" scoped>
.vip-qrcode {
  width: 600rpx;
  height: 846rpx;
  background: #ffffff;
  border-radius: 16rpx;
  text-align: center;

  .title {
    padding: 40rpx 0;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
  }

  .code1 {
    width: 360rpx;
    height: 360rpx;
    margin-top: 20rpx;
  }

  .code2 {
    width: 444rpx;
    height: 160rpx;
    margin-top: 54rpx;
  }

  .number {
    margin-top: 12rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    color: #2b2b2b;
    line-height: 40rpx;
    letter-spacing: 4rpx;
  }
}
</style>
